<!-- 现场考察 -->
<template>
  <div>
    <div v-show="!isCreate" class="main-box">
      <div>
        <a-icon type="file-text" :style="{ color: '#868686', fontSize: '30px' }" />
      </div>
      <div class="mt-20">
        <a-button type="primary" @click="onCreateBill">创建验厂准入单</a-button>
      </div>
      <div class="mt-20" style="color: #4F4F4F; font-size: 14px;">
        温馨提示：未经过供应商调查认可的厂商，除总经理特准外，不可成为本公司的供应商。
      </div>
    </div>
    <div v-show="isCreate" class="detail-box">
      <div>
        <span class="title">调查时间</span>：<span>2024-06-01  至  2024-06-03</span>
        <span class="title ml-30">调查人员</span>：<span>李先生、杨先生、张小姐、王小姐</span>
      </div>
      <div class="mt-20">
        <span class="title">调查得分</span>：<span style="font-size: 20px;">82.5分</span>
        <a-table
          size="small"
          bordered
          :columns="columns"
          :dataSource="[...dataSource, ...totalData]"
          :pagination="false"
          class="mt-10">
          <template slot="index" slot-scope="text, record, index">
            <span v-if="index < dataSource.length">{{ index + 1 }}</span>
            <span v-else>合计</span>
          </template>
        </a-table>
      </div>
      <div class="mt-20">
        <span class="title">供应商调查表</span>
      </div>
      <div>
        <a-upload :file-list="fileList" disabled></a-upload>
      </div>
    </div>
    <c-modal
      title="验厂准入单"
      :visible.sync="dialogVisible"
      :centered="true"
      :maskClosable="false">
      <div class="tip-box">
        <span class="title">调查对象</span>：<span>河南盛世机械工具集团有限公司</span>
        <span class="title ml-30">法定代表人</span>：<span>杨先生</span>
      </div>
      <div class="create-box">
        <a-form-model layout="inline">
          <a-row :gutter="24">
            <a-col :md="12" :sm="24">
              <a-form-model-item label="调查时间">
                <a-range-picker
                  v-model="surveyTime"
                  format="YYYY-MM-DD"
                  style="width:100%;"
                  @change="(timeRange, timeStringRange) => setTimeRange('surveyTimeStart', 'surveyTimeEnd', timeRange, timeStringRange)"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item label="调查人员">
                <ASelectList v-model="surveyPerson" :isHasDict="false" :defaultOption="surveyPersonOption" @change="surveyPersonChange" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
        <div class="mt-20">
          <div class="title">供应商调查表</div>
          <a-table
            size="small"
            bordered
            :columns="columns"
            :dataSource="[...dataSource, ...totalData]"
            :pagination="false"
            class="mt-10">
            <template slot="index" slot-scope="text, record, index">
              <span v-if="index < dataSource.length">{{ index + 1 }}</span>
              <span v-else>合计</span>
            </template>
            <template slot="score" slot-scope="text, record, index">
              <a-input-number v-if="index < dataSource.length" v-model="record.score" :min="0" :max="100" />
              <span v-else>{{ record.score }}</span>
            </template>
            <template slot="scoreInstruction" slot-scope="text, record, index">
              <a-textarea v-if="index < dataSource.length" v-model="record.scoreInstruction" placeholder="请输入" :rows="1" />
            </template>
          </a-table>
        </div>
        <div class="score-box mt-20">
          评分说明：合计为各项评分乘以权重比例的总和，仅支持总分合计为100分，则各项评分值需填入100以内。
        </div>
        <div class="mt-20">
          <div class="title">供应商调查表</div>
          <div class="mt-10">
            <a-upload
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              :multiple="true"
              :file-list="fileList"
              @change="handleChange">
              <a-button icon="upload">上传附件</a-button>
              <span class="ml-10" style="color:#101010;">支持xlsx、PDF、PNG、JPG、PPT等格式文件，大小≤5M</span>
            </a-upload>
          </div>
        </div>
      </div>
      <template slot="footer">
        <div class="flex-center">
          <a-button type="primary" @click="onDailogConfirm">确定</a-button>
          <a-button @click="onDailogClose">关闭</a-button>
        </div>
      </template>
    </c-modal>
  </div>
</template>

<script>
export default {
  name: 'SiteInspection',
  data() {
    return {
      isCreate: false,
      dialogVisible: false,
      surveyTime: [],
      surveyTimeStart: '',
      surveyTimeEnd: '',
      surveyPerson: '',
      surveyPersonOption: [
        { label: '张三', value: '1' },
        { label: '李四', value: '2' },
        { label: '王五', value: '3' }
      ],
      columns: [
        // { title: '序号', width: 50, customRender: (text, record, index) => `${index + 1}`, align: 'center' },
        { title: '序号', width: 50, scopedSlots: { customRender: 'index' }, align: 'center' },
        { title: '调查项', dataIndex: 'surveyItem', width: 150, ellipsis: true },
        { title: '权重', dataIndex: 'weight', width: 100, ellipsis: true },
        { title: '评分', dataIndex: 'score', width: 150, scopedSlots: { customRender: 'score' }, ellipsis: true },
        { title: '评分说明', dataIndex: 'scoreInstruction', scopedSlots: { customRender: 'scoreInstruction' }, ellipsis: true },
      ],
      dataSource: [
        { surveyItem: '管理能力', weight: '25%', score: 0, scoreInstruction: '' },
        { surveyItem: '地理位置', weight: '25%', score: 0, scoreInstruction: '' },
        { surveyItem: '基本产能测试', weight: '25%', score: 0, scoreInstruction: '' },
        { surveyItem: '管理能力', weight: '25%', score: 0, scoreInstruction: '' }
      ],
      fileList: [
        {
          uid: '-1',
          name: '河南盛世机械供应商调查表-V1.0 2024-06-01.xlcx',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png',
        }
      ],
    };
  },
  computed: {
    totalData() {
      let score = 0;
      this.dataSource.forEach(item => {
        score += item.score;
      })
      return [{ surveyItem: '', weight: '', score, scoreInstruction: '' }]
    }
  },
  mounted() {
  },
  methods: {
    onCreateBill() {
      this.dialogVisible = true;
    },
    onDailogConfirm() {
      this.isCreate = true;
      this.dialogVisible = false;
    },
    onDailogClose() {
      this.dialogVisible = false;
    },
    // 范围日期处理
    setTimeRange(startTimeName, endTimeName, timeRange, timeStringRange) {
      if (timeStringRange.length > 0) {
        const [one, two] = timeStringRange;
        this[startTimeName] = one + ' ' + '00:00:00';
        this[endTimeName] = two + ' ' + '23:59:59';
      } else {
        this[startTimeName] = '';
        this[endTimeName] = '';
      }
    },
    surveyPersonChange() {

    },
    handleChange(info) {
      let fileList = [...info.fileList];
      // 1. Limit the number of uploaded files
      //    Only to show two recent uploaded files, and old ones will be replaced by the new
      fileList = fileList.slice(-2);

      // 2. read from response and show file link
      fileList = fileList.map(file => {
        if (file.response) {
          // Component will show file.url as link
          file.url = file.response.url;
        }
        return file;
      });
      this.fileList = fileList;
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
}
.main-box {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 800px;
  height: 450px;
  font-size: 14px;
  text-align: center;
  background-color: rgba(237, 245, 253, 1);
  border: 2px solid rgba(187, 187, 187, 1);
  border-radius: 8px;

  margin: 0 auto;
}
.detail-box {
  padding: 20px 10px;
}

.create-box {
  padding: 20px 25px;
}

.tip-box {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  background-color: rgba(245,245,245,1);
  padding: 0 25px;
}
.score-box {
  line-height: 30px;
  color: rgba(79, 79, 79, 1);
  font-size: 14px;
  border-bottom: 1px solid rgba(187, 187, 187, 1);
}
</style>